<style lang="scss">
  .business-month {
    .el-main {
      padding-top: 0 !important;
    }
    .el-table {
      height: calc(100vh - 220px);
    }
    .el-form-item {
      margin-top: 0px;
      margin-bottom: 24px !important;
    }
    .el-form {
      height: calc(100vh - 320px);
      overflow-y: auto;
    }
    /*滚动条样式*/
    .el-form::-webkit-scrollbar {/*滚动条整体样式*/
        width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }
    .el-form::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 2px;
        -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.1);
    }
    .el-form::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.1);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }
    .btn-div {
      margin: 20px 0;
      text-align: center;
    }
  }
</style>

<template>
  <el-container class="business-month">
    <!-- 顶栏容器 -->
    <el-header>
      <!-- 查询框 -->
      <div class="search-box">
        <div class="conditions-box">
          <div class="conditions-item" style="margin-right: 24px;">
            <el-radio-group v-model="statusId" size="small" @change="doSearch">
              <el-radio-button :label="item.ztid" v-for="(item, index) in statusList" :key="index">{{item.name}}</el-radio-button>
            </el-radio-group>
          </div>
          <div class="conditions-item">上报处室：
            <el-select v-model="pageParam.condition.deptId" size="small" :clearable="true" placeholder="请选择处室" @change="doSearch" style="width: 160px;">
              <el-option v-for="item in deptList" :key="item.bmid" :label="item.bmjc" :value="item.bmid"></el-option>
            </el-select>
          </div>
          <div class="conditions-item">关键字:
            <el-input
              v-model="pageParam.condition.content"
              size="small"
              :clearable="true"
              placeholder="请输入关键字"
              style="width: 160px;"
            ></el-input>
          </div>
        </div>
        <div class="search-btn">
          <el-button type="info" plain size="small" icon="el-icon-search" @click="doSearch" :loading="loadingTable">查询</el-button>
        </div>
      </div>
    </el-header>
    <!-- 主要区域容器 -->
    <el-main>
      <el-table :data="tableItem.list" border stripe :height="tableHeight" v-loading="loadingTable">
        <el-table-column prop="deptName" label="上报处室" align="center" width="100"></el-table-column>
        <el-table-column prop="keyWork" label="重点工作推进情况" align="left"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="lightEffect" label="特色亮点及阶段成效" align="left"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="workPlan" label="下月工作计划" align="left"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="advise" label="问题建议" align="left"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="lastTime" label="维护时间" align="center" :formatter="formatDate" width="220"></el-table-column>
        <!-- <el-table-column prop="dqzt" label="当前状态" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 2">待上报</span>
            <span v-else style="color: #67C23A">已上报</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="operations" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in scope.row.operationsModelList"
              :key="index" :type="item.type" plain size="mini" :icon="item.icon"
              v-bind:class="'operations-'+item.handleMethod"
              @click="operationClick(item.handleMethod, scope.row)"
            >{{item.label}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableItem.pageNum"
        :page-size="tableItem.pageSize"
        :page-sizes="[20, 30, 50]"
        :total="tableItem.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right;"
      ></el-pagination>
    </el-main>

    <!-- 营商信息上报 -->
    <el-dialog title="信息上报" :visible.sync="dialogBusinessInfo" width="80%" :before-close="dialogBusinessInfoCloseFn">
      <el-form :model="formItemData" ref="formItemData" label-width="200px" v-loading="loadingForm">
        <el-row>
          <el-col :span="10" :offset="1">
            <el-form-item label="上报处室：">
              <p>{{formItemData.deptName}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21" :offset="1">
            <el-form-item label="重点工作推进情况：">
              <p class="form-contnet">{{formItemData.keyWork}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21" :offset="1">
            <el-form-item label="特色亮点及阶段成效：">
              <p class="form-contnet">{{formItemData.lightEffect}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21" :offset="1">
            <el-form-item label="下月工作计划：">
              <p class="form-contnet">{{formItemData.workPlan}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21" :offset="1">
            <el-form-item label="问题建议：">
              <p class="form-contnet">{{formItemData.advise}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btn-div" v-if="formItemData.state != 4">
          <el-button type="primary" @click="reportFn('formItemData')" :loading="loadingForm">上报</el-button>
          <el-button @click="dialogBusinessInfoCloseFn">返回</el-button>
        </div>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  export default {
    data () {
      return {
        name: 'business-month',
        // 用户信息
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
        // 状态列表
        statusList: [
          {
            ztid: 'd',
            name: '待上报'
          }, {
            ztid: 'y',
            name: '已上报'
          }
        ],
        // 处室列表
        deptList: [],
        // 表格高度
        tableHeight: -1,
        statusId: 'd',
        labelPosition: 'right',
        // 表格列表
        tableItem: {},
        // 表格数据查询条数
        pageParam: {
          pageNum: 1,
          pageSize: 10,
          condition: {
            deptId: '',
            cycleId: '1008612',
            statusId: '',
            content: ''
          }
        },
        // 表单
        formItemData: {
          deptName: ''
        },
        // 加载
        loadingTable: false,
        loadingForm: false,
        loadingSave: false,
        dialogBusinessInfo: false,
        fullScreen: true
      }
    },
    methods: {
      // 页面初始
      initFn () {
        this.getDeptList()
        this.doSearch()
      },
      // 获取责任处室
      getDeptList () {
        this.$axios.post(this.$api.dept.selector).then(rs => {
          if (rs) {
            this.deptList = rs
          }
        })
      },
      // 查询方法
      doSearch () {
        this.loadingTable = true
        this.getBusinessPage()
      },
      // 获取督办处室分页列表
      getBusinessPage () {
        const _this = this
        _this.pageParam.condition.statusId = _this.statusId
        _this.$axios.post(_this.$api.business.whPage, _this.pageParam)
          .then(function (rs) {
            if (rs) {
              _this.loadingTable = false
              _this.tableItem = rs
            }
          })
      },
      // 分页
      handleSizeChange: function (size) {
        this.loadingTable = true
        this.pageParam.pageSize = size
        this.getBusinessPage()
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.loadingTable = true
        this.pageParam.pageNum = currentPage
        this.getBusinessPage()
      },
      // 日期格式化
      formatDate: function (row, column) {
        const _this = this
        var date = row.createTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日 HH时mm分')
      },
      // 操作点击事件
      operationClick (method, row) {
        switch (method) {
          case 'report':
            this.detailFn(row)
            break
          case 'detail':
            this.detailFn(row)
            break
        }
      },
      // 上报
      reportFn () {
        const _this = this
        _this.$confirm('此操作将会上报该信息，是否继续?', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
          .then(() => {
            _this.loadingTable = true
            _this.$axios.get(_this.$api.business.report + '/' + _this.xxid)
              .then(function (rs) {
                if (rs) {
                  _this.$message({ message: '上报成功!', showClose: true, type: 'success' })
                  _this.statusId = 'y'
                  _this.dialogBusinessInfoCloseFn()
                  _this.doSearch()
                  _this.loadingTable = false
                }
              })
          })
          .catch(() => {})
      },
      // 查看
      detailFn: function (row) {
        const _this = this
        // console.log(row);
        _this.dialogBusinessInfo = true
        _this.loadingForm = true
        _this.$axios.get(_this.$api.business.info + '/' + row.xxid)
          .then(function (rs) {
            if (rs) {
              // console.log(rs);
              _this.xxid = rs.xxid
              _this.formItemData = rs
              _this.loadingForm = false
            }
          })
      },
      // 关闭
      dialogBusinessInfoCloseFn () {
        this.xxid = ''
        this.dialogBusinessInfo = false
      }
    },
    created: function () {
      // this.doSearch()
    }
  }
</script>
